<template>
    <div>
        <div class="search-bar">
            <van-row>
                <van-col span="3">
                    <img :src="locationIcon" width="80%" class="location-icon"/>
                </van-col>
                <van-col span="16">
                    <input type="text" class="search-input"/>
                </van-col>
                <van-col span="5"><van-button size="mini">查找</van-button></van-col>
            </van-row>
        </div>
        <div class="swiper-area">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in bannerPicArray" :key="index">
                    <img v-lazy="image.imageUrl" width="100%"/>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>

</template>


<script>
import axios from 'axios'
export default {
    data(){
        return{
            locationIcon:require('../../assets/images/location.png'),
            bannerPicArray:[
                {imageUrl:'http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175040_1780.jpg'},
                {imageUrl:'http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175111_9509.jpg'},
                {imageUrl:'http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175142_6947.jpg'},
            ],
        }
    }
}
</script>

<style scoped>
    .search-bar{
        height: 2.2rem;
        background-color: #e5017d;
        line-height: 2.2rem;
        overflow: hidden;
    }

    .search-input{
        background-color: #e5017d;
        width: 100%;
        height: 1.3rem;
        color: #fff;
        border-top:0px;
        border-left: 0px;
        border-right: 0px;
        border-bottom: 1px solid #fff !important;
    }

    .location-icon{
        padding-left: 0.3rem;
        padding-top: 0.2rem;
    }

    .swiper-area{
        clear: both;
        max-height: 15rem;
        overflow: hidden;
    }

    
</style>

